/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, BlobInputList, TableHead, InputLine, Input, LineColumn,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet, } from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle,} from "../../hook/useOmnipotentPref";

//带下标字符 推荐使用m<sup>&#179;</sup>或m³（如果你的文档编码是UTF-8）来表示立方米 ；div必须加上  <div>×10<sup>2</sup></div>,
//配置类似常用的，单解析和编辑处理函数都需定做的！ ：扩展开新的第五个字段内容：可对多字段的默认值设置  [标准值，许值，限制条件]；默认值最终也要保存到rep。单位只留下附加的10^3。
/* 用 JSON.parse(JSON.stringify(obj)) 方法进行深拷贝时，问题 React 元素（如 <div>×10<sup>2</sup></div>），深拷贝将不会保留这些 React 元素；
 用 lodash 的 _.cloneDeep（但请注意，_.cloneDeep 也不支持函数和循环引用的正确拷贝，且对于 DOM 元素或 React 元素等复杂对象，它可能只是进行浅拷贝或产生不可预测的结果）
最好的做法是将 React 元素转换为字符串或其他可以安全序列化的格式，或者将它们存储在配置数据之外的地方。
* */
export const setConfig水质 =(orc:any)=> [
  //原水
  ['原浊度', [{t:`${orc?.原浊度?.W??''}${orc?'/编号: ':''}${orc?.原浊度?.H??''}`, s:11}], '浊度 （FTU）', '',[]],
  ['原硬度', [{}], '硬度 （mmol/L）', '',[]],
  ['原pH', [{}], 'pH值（25℃）', '',[]],
  ['原电导', [{}], '电导率(25℃)（μS/cm）', '',[]],
  ['原铁', [{}], '铁 （mg/L）', '',[]],
  ['原全碱', [{}], '全碱度（mmol/L）', '',[]],
  ['原氯离', [{}], '氯离子（mg/L）', '',[]],
    //item正常都该配置 : '—' 做耦合标记
  ['它项1', [{}], `${orc?.它项1?.n??'—'}`, '',[]],
  ['它项2', [{}], `${orc?.它项2?.n??'—'}`, '',[]],
  ['它项3', [{}], `${orc?.它项3?.n??'—'}`, '',[]],
  ['它项4', [{}], `${orc?.它项4?.n??'—'}`, '',[]],
  //【注意】耦合性：这里配置的行数的顺序位置(0===i || 11===i || 24===i || 39===i)
  ['给浊度', [{t:`给水${orc?'(补给水)/编号: ':''}${orc?.给浊度?.H??''}`, s:13}], '浊度 （FTU）', '',[]],
  ['给硬度', [{}], '硬度 （mmol/L）', '',[undefined, '标准值＜允许值≤标准值×1.3', '锅水pH 值和碱度应合格']],
  ['给pH', [{}], 'pH值（25℃）', '',[undefined, '6.8≤允许值＜标准值下限', '锅水pH 值应合格']],
  ['给电导', [{}], '电导率（25℃）（μS/cm）', <div>×10<sup>2</sup></div>,[]],
  ['给溶解氧', [{}], '溶解氧 （mg/L）', '',[]],
  ['给油', [{}], '油 （mg/L）', '',[]],
  ['给铁', [{}], '铁 （mg/L）', '',[undefined, '标准值＜允许值≤标准值×1.3', ]],
  ['给全碱', [{}], '全碱度 （mmol/L）', '',[]],
  ['给酚酞', [{}], '酚酞碱度（mmol/L）', '',[]],
  ['给固形', [{}], '溶解固形物（mg/L）', <div>×10<sup>3</sup></div>,[]],
  ['给磷酸', [{}], '磷酸根（mg/L）', '',[]],
  ['给亚硫酸', [{}], '亚硫酸根（mg/L）', '',[]],
  ['给氯', [{}], '氯离子 （mg/L）', '',[]],
  ['锅酚酞', [{t:`锅水${orc?'/编号: ':''}${orc?.锅酚酞?.H??''}`, s:15}], '酚酞碱度（mmol/L）', '',[]],
  ['锅全碱', [{}], '全碱度（mmol/L）', '',[undefined, '标准值下限×0.8≤允许值＜标准值下限 或 标准值上限＜允许值≤标准值上限×1.1', '低于标准值下限：采用锅外水处理，且给水硬度合格；高于标准值上限：对蒸汽质量要求不高，且无过热器。']],
  ['锅pH', [{}], 'pH值（25℃）', '',[undefined, '9.5≤允许值＜标准值下限 或 标准值上限＜允许值≤12.2', '2.5MPa＜额定压力＜3.8Mpa的蒸汽锅炉，pH值应为9.0～12.0。']],
  ['锅电导', [{}], '电导率（25℃)(μS/cm）', <div>×10<sup>3</sup></div>,[undefined,'标准值上限＜允许值≤标准值上限×1.1','对蒸汽质量要求不高，且无过热器。']],
  ['锅中和电', [{}], '中和后电导率（25℃）（μS/cm）', <div>×10<sup>3</sup></div>,[]],
  ['锅固形', [{}], '溶解固形物（mg/L）', <div>×10<sup>3</sup></div>,[undefined,'标准值上限＜允许值≤标准值上限×1.1','对蒸汽质量要求不高，且无过热器。']],
  ['锅磷酸', [{}], '磷酸根（mg/L）', '',[undefined, '标准值下限×0.5≤允许值＜标准值下限 或 标准值上限＜允许值≤标准值上限×1.5', '采用磷酸盐阻垢，锅水碱度合格']],
  ['锅亚硫酸', [{}], '亚硫酸根（mg/L）', '',[undefined, '标准值下限×0.5≤允许值＜标准值下限 或 标准值上限＜允许值≤标准值上限×1.5', '采用亚硫酸盐除氧']],
  ['锅碱度', [{}], '相对碱度', '',[]],
  ['锅铁', [{}], '铁 （mg/L）', '',[]],
  ['锅油', [{}], '油 （mg/L）', '',[]],
  ['锅溶解氧', [{}], '溶解氧 （mg/L）', '',[]],
  ['锅氯', [{}], '氯离子（mg/L）', '',[]],
  ['锅固氯', [{}], '固氯比', '',[]],
  ['锅固导', [{}], '固导比', '',[]],
  ['回硬度', [{t:`回水${orc?'/编号: ':''}${orc?.回硬度?.H??''}`, s:4}], '硬度 （mmol/L）', '',['≤0.060', ]],
  ['回铁', [{}], '铁 （mg/L）', '',['≤0.60', ]],
  ['回铜', [{}], '铜 （mg/L）', '',['≤0.10', ]],
  ['回油', [{}], '油 （mg/L）', '',['≤2.0', ]],
];
const 水质结果选=['符合要求','基本符合要求','不符合要求','所检项目符合要求','所检项目基本符合要求','不符合项目为:'];
export const items水质检 =setConfig水质(undefined);
export const itemA水质检: string[] = ['水质结果' ];
items水质检.forEach(([name, title, initIsp], i: number) => {
  itemA水质检.push(name as string);
});
//未定义的就采用缺省取值吧； 存储到rep
const defaultValCb= (par: any)=>{
  items水质检.forEach(([name1 , _,item,unit,defs ], i: number) => {
    const name=name1 as string;
    const [biaoz,yunxu,tiaoj]=defs as any;
    if(biaoz || yunxu || tiaoj){
      let useob=par?.[name];
      const mergob={b:biaoz, y:yunxu, t:tiaoj,  ...useob};
      par[name]=mergob;
    }
  });
  return  par;
}
export const WaterQuality =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA水质检, defaultValCb);
      const titNode=useOmnipotentPrefTitle({config:items水质检});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>

            {items水质检.map(([name, cfgs, item, unit,[biaoz,yunxu,tiaoj]]: any, i: number) => {
              const {t:group}=cfgs[0];
              return (<React.Fragment key={i}>
                <LineColumn>
                  {0===i &&  <InputLine label={`前11项的水样种类：`}>
                    <BlobInputList value={inp?.[name]?.W ?? ''} datalist={["原水", ]}
                                   style={{display: 'inline-flex', width: '9rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'W', v || undefined, inp, setInp)}/>
                  </InputLine>
                  }
                  {(0===i || 11===i || 24===i || 39===i) && <InputLine label={`${''===group?'前11项':group}-的采样编号：`}>
                    <Input value={inp?.[name]?.H ?? ''}
                           onChange={e => objNestSet(name, 'H', e.currentTarget.value || undefined, inp, setInp)}/>
                  </InputLine>
                  }
                </LineColumn>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  &nbsp;
                  {'—'===item && <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                      -{name}:
                      <Input value={inp?.[name]?.n ?? ''} size={15} style={{display: 'inline-flex', width: 'unset'}}
                             onChange={e => objNestSet(name, 'n', e.currentTarget.value || undefined, inp, setInp)}/>
                   </div>
                  }
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;标准值
                    <BlobInputList value={inp?.[name]?.b ?? ''}
                                   style={{display: 'inline-flex', width: '9rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'b', v || undefined, inp, setInp)}/>
                    {unit}
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;实测值
                    <BlobInputList value={inp?.[name]?.r ?? ''}
                                   style={{display: 'inline-flex', width: '6rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                    {unit}
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;允许值
                    <BlobInputList value={inp?.[name]?.y ?? ''}
                                   style={{display: 'inline-flex', width: '19rem'}} rows={inp?.[name]?.y?.length>15? 2:1}
                                   onListChange={v => objNestSet(name, 'y', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;限制条件
                    <BlobInputList value={inp?.[name]?.t ?? ''}
                                   style={{display: 'inline-flex', width: '19rem'}} rows={inp?.[name]?.t?.length>15? 2:1}
                                   onListChange={v => objNestSet(name, 't', v || undefined, inp, setInp)}/>
                  </div>
                </div>
                {(10===i || 23===i || 38===i) && <hr/>}
              </React.Fragment>);
            })}
            注1：计算结果应修约到二位小数；其他样品、项目可在第1页空白列（项目8-11）添加。
            <Text variant="h5">水质检验结果{'>>'}</Text>
            <BlobInputList value={inp?.水质结果 || ''} rows={3} datalist={水质结果选}
                         onListChange={v => setInp({...inp, 水质结果: v || undefined}) } />
            {children}
          </InspectRecordLayout>
      );
});

const tailRender=(orc: any, name: string,lix:number,unit:any)=><>
  { unit? <>
        <CCellUnit unit={unit}>{orc?.[name]?.b??'—'}</CCellUnit>
        <CCellUnit unit={unit}>{orc?.[name]?.r??'—'}</CCellUnit>
      </>
      :
    <>
      <CCell>{orc?.[name]?.b??'—'}</CCell>
      <CCell>{orc?.[name]?.r??'—'}</CCell>
    </>
  }
  <CCell><div css={{whiteSpace: 'pre-wrap'}}>{orc?.[name]?.y??'—'}</div></CCell>
  <CCell><div css={{whiteSpace: 'pre-wrap'}}>{orc?.[name]?.t??'—'}</div></CCell>
</>;
//前提：用—来替代空值斜杠的。
//工业锅炉水处理定期检验报告 (续页一)
export const WaterQualityVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const configNew =React.useMemo(()=>setConfig水质(orc),[orc]);
  const [render]=useOmnipotentPrefCs({orc, config:configNew,
            tailRender, pcols:1, noNo:true, unitCel:false});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
    </div>
    <Table id={'WaterQuality'} fixed={ ["6.6%","19%","12%","12%","%","25%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
      <TableHead>
        <TableRow><CCell colSpan={6}>水质检验</CCell></TableRow>
        <TableRow>
          <CCell><Text css={{fontSize: '0.7rem'}}>水样名称</Text></CCell><CCell>项 目</CCell><CCell>标准值</CCell>
          <CCell>实测值</CCell><CCell>基本符合评判允许值</CCell><CCell>基本符合评判限制条件</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={"WaterQuality"}>
          {render}
          <TableRow><CCell>水质检验结果</CCell>
            <CCell colSpan={5}>
              <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap',alignContent:'center'}}>
                <Text>{orc?.水质结果 || '／'}</Text>
              </div>
            </CCell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
